/**
 * 需求：
 * 可以这么使用：Message({ type: 'error', text: '登录失败', time:3000 })
 * 1. 调用方法支持传参，显示定制的消息提示框
 * 2. 指定时间内自动关闭消息提示框
 */

import { createVNode, render } from 'vue'
import Msg from './index.vue'

export default ({ type, text, time = 2000 }) => {
  /**
    * 思路：
    * 1. 把消息提示框组件使用createVNode方法，创建成虚拟DOM
    * 2. 渲染虚拟DOM
    * 3. 控制被创建元素的显示隐藏
    */
  const msg = createVNode(Msg, { type, text })
  render(msg, document.body)
  console.log('vnode:', msg)
  // 调用组件变量=》显示隐藏
  msg.component.setupState.isShow = true
  setTimeout(() => {
    msg.component.setupState.isShow = false
  }, time)
}
